<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-size: 20px;
        }

        * {
            margin: 0;
            padding: 0;

        }

        div{
            width: 10rem;
            height: 10rem;
            margin: 2rem auto;
            background: red;
            _transform: rotate(30deg);
        }
        
    </style>
</head>

<body>
    <div></div>
</body>
    <script>
        /* 
            360度 =  2π
            180 = π
            1度    =  π/180
            1弧度 =  180/π  
        */

        const a2d=(a)=>{
            return a*180/Math.PI;
        }
        const oDiv=document.querySelector('div');
        let d=0; //角度的变化量

        oDiv.addEventListener('touchstart',(ev)=>{
            
            const getS=(ev)=>{
                let x1=ev.targetTouches[1].pageX;
                let y1=ev.targetTouches[1].pageY;

                let x2=ev.targetTouches[0].pageX;
                let y2=ev.targetTouches[0].pageY;

                let a=x1-x;
                let b=y-y1;

                let s=Math.sqrt(a*a+b*b)
                return s;
            }
            let downD=getD(ev);
            let oldD=d;

            const fnMove=(ev)=>{
                let moveD=getD(ev);
                d=moveD/downD*oldD;

                oDiv.style.transform='scale('+d+')';
            }

            const fnEnd=()=>{
                oDiv.removeEventListener('touchmove',fnMove);
                oDiv.removeEventListener('touchend',fnEnd);
            }

            oDiv.addEventListener('touchmove',fnMove);
            oDiv.addEventListener('touchend',fnEnd);
            ev.preventDefault();
        })
    </script>
</html>